import React from "react";
import { RouteRawState } from "../types";
import { Navigate } from 'react-router-dom'

interface PropsType {
  route: RouteRawState;
}

const BeforeEach: React.FC<PropsType> = ({ route }) => {
  const role = localStorage.getItem("role");
  const token = localStorage.getItem("token");
  const { roles, requireLogin } = route;

  // 浏览器标题设置
  document.title = route.title
  // 注意： 这里不需要登录权限的页面  只有 登录和注册页面
  // 1. 已登录
  if (token) {
    //  1-1 访问 需要登录权限的页面
    if (requireLogin) {
      // 1-1-1  是否拥有访问权限
      if(roles) {
        if(roles.includes(role as string)) {
          return route.element
        } else {
          return <div>非常遗憾， 当前用户访问权限不够， 请联系管理员。  403</div>
        }
      } else {
        return route.element
      }
    } else {
      //  1-2 访问 不需要登录权限页面 => 拦截到首页
      return <Navigate to="/"></Navigate>
    }
  } else {
    // 2. 未登录
    //  1-1 访问 需要登录权限的页面 => 拦截到登录
    if(requireLogin) return <Navigate to="/login"></Navigate>
    //  1-2 访问 不需要登录权限页面 => 正常访问
    else return route.element
  }
};

export default BeforeEach;
